<template>
    <view class="container">
        <!-- 评价卡片 -->
        <view class="evaluation-card">
            <view class="activity-title">
                {{ activityName }}
            </view>
            <view class="rating-section">
                <view class="total-label">总体评价</view>
                <view class="rating-stars">
                    <view class="rating-descriptions">
                        <text class="rating-description">很糟</text>
                        <text class="rating-description">较差</text>
                        <text class="rating-description">一般</text>
                        <text class="rating-description">还行</text>
                        <text class="rating-description">超赞</text>
                    </view>
                    <u-rate style="display: block" size="46" gutter="60" active-color="#FE7F41" inactive-color="#EAEAEA"
                        icon="star" v-model="value" @change="onChange" />
                </view>
            </view>

        </view>

        <!-- 输入评价卡片 -->
        <view class="evaluation-card mt-2">
            <view>
                <!-- <u-input class="evaluation-input" v-model="textarea" type="textarea" placeholder="请填写您的评价信息" /> -->
                <u-textarea height="150" v-model="textarea" placeholder="请填写您的评价信息" count></u-textarea>
            </view>
            <view class="upload-section">
                <view class="upload-list">
                    <uploadFile :fileList="uploadedPics" @onUpload="onUploadImg"
                        @onUploadSuccess="onUploadSuccessImg" />
                </view>
                <view class="upload-list ml-2">
                    <uploadFile :fileList="uploadedVideos" fileName="video" :count="1" iconName="video"
                        extension="mp4,avi,mov,wmv,mkv,flv,3gp,mpg,mpeg,m4v" desc="上传视频" @onUpload="onUploadView"
                        @onUploadSuccess="onUploadSuccessView" />
                </view>
            </view>
        </view>

        <!-- 提交按钮 -->
        <view class="submit-section">
            <u-button class="submit-button" type="primary" shape="circle" :loading="subLoading" @click="onSubmit">
                发布评价
            </u-button>
        </view>
    </view>
</template>

<script>
import uploadFile from '../upload/index.vue';
import { submitAppraise, orderInfoRecord } from '../../../utils/api/local';
import { IMG_URL } from "../../../config/index";

export default {
    components: {
        uploadFile,
    },
    data() {
        return {
            value: 5,
            textarea: '',
            videoUrl: [],
            pics: [],
            subLoading: false,
            orderNo: '',
            evaluatText: '超赞',
            activityName: '',
            uploadedPics: [], // 用于存储上传成功的图片数据
            uploadedVideos: [], // 用于存储上传成功的视频数据
            videos:[],
            imgs:[],
        };
    },
    onLoad(option) {
        this.orderNo = option.orderId;
        this.orderInfoRecord(this.orderNo, option.id);
    },
    methods: {
        onChange(value) {
            switch (value) {
                case 1:
                    this.evaluatText = '很糟';
                    break;
                case 2:
                    this.evaluatText = '较差';
                    break;
                case 3:
                    this.evaluatText = '一般';
                    break;
                case 4:
                    this.evaluatText = '还行';
                    break;
                case 5:
                    this.evaluatText = '超赞';
                    break;
            }
        },
        orderInfoRecord(orderNo, id) {
            orderInfoRecord({
                id,
                orderId: orderNo,
                userId: uni.getStorageSync("uid"),
            }).then((res) => {
                this.activityName = res.data.ebMerActivityName;
            });
        },
        onUploadView(data) {
            this.videoUrl = this.videoUrl.concat(data || []);
        },
        onUploadImg(data) {
            this.pics = this.pics.concat(data || []);
        },
        onUploadSuccessImg(results) {
            results.forEach((result) => {
                if (result && result.fileName && result.url) {
                    let img = IMG_URL + '/' + result.fileName;
                    this.uploadedPics.push(img);
                    this.imgs.push(result.fileName)
                } else {
                    console.warn('上传结果中缺少 fileName 或 url 字段', result);
                }
            });
        },
        onUploadSuccessView(results) {
            results.forEach((result) => {
                if (result && result.fileName && result.url) {
                    let img = IMG_URL + '/' + result.fileName;
                    this.uploadedVideos.push(img);
                    this.videos.push(result.fileName)
                } else {
                    console.warn('上传结果中缺少 fileName 或 url 字段', result);
                }
            });
        },
        onSubmit() {
            this.subLoading = true;
            submitAppraise({
                comment: this.textarea,
                pics: this.imgs.join(','),
                videoUrl: this.videos.join(','),
                productScore: this.value,
                avatar: '',
                nickname: '',
                orderNo: this.orderNo,
                sku: '',
                unique: '',
                userId: uni.getStorageSync("uid"),
            })
                .then((res) => {
                    uni.showToast({
                        title: res.message,
                        icon: 'none',
                    })
                    setTimeout(() => {
                        this.subLoading = false;
                        if (res.code === 200) {
                            uni.redirectTo({
                                url: '/pages_h5/myCenter/components/local_life_order',
                            });
                        }
                    }, 1000);
                })
                .catch((err) => {
                    this.$toast('发布失败');
                    this.subLoading = false;
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.container {
    padding: 30rpx;
    background-color: #f7f7f7;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.evaluation-card {
    background-color: #ffffff;
    border-radius: 20rpx;
    padding: 25rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 10rpx 0 rgba(0, 0, 0, 0.1);
}

.activity-title {
    font-size: 36rpx;
    color: #333333;
    margin-bottom: 15rpx;
}

.rating-section {
    display: flex;
    align-items: center;
}

.total-label {
    font-size: 30rpx;
    color: #666666;
}

.rating-stars {
    flex: 1;
    margin-left: 20rpx;
}

.rating-descriptions {
    display: flex;
    justify-content: space-around;
    margin-bottom: 10rpx;
}

.rating-description {
    font-size: 26rpx;
    color: #999999;
}

.upload-section {
    display: flex;
    justify-content: flex-start;
    margin-top: 20rpx;
}

.upload-list {
    width: 300rpx;
    margin-right: 20rpx;
    border-radius: 20rpx;
}

.evaluation-input {
    border: 2rpx solid #eaeaea;
    border-radius: 15rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
    background-color: #ffffff;
    height: 150rpx;
}

.submit-section {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 20rpx;
}

.submit-button {
    width: 80%;
    background-color: orange;
    display: flex;
    justify-content: center;
}
</style>
